
<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="aside">
        <Aside></Aside>
      </el-aside>
      <el-container>
        <el-header class="header">
          <Header></Header>
        </el-header>
        <el-main class="main">
          <div class="main-container">
            <RouterView>
              <template #default="{ Component }">
                <transition name="slide-fade" mode="out-in">
                  <component :is="Component" />
                </transition>
                </template>
              </RouterView>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import Aside from "./views/Aside.vue";
import Header from "./views/Header.vue";
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.aside {
  width: 200px;
  min-height: 100vh;
  border-right: 1px solid var(--el-menu-border-color);
}
.header {
  min-width: 1200px;
  border-bottom: 1px solid var(--el-menu-border-color);
}
.main {
  min-width: 1200px;
  .main-container {
    height: calc(100vh - 100px);
    overflow: auto;
    /* 定义滚动条宽度和背景 */

  }
  // animation: fadeIn 0.5s ease-in-out;
}
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.5s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
<style lang="scss">
/* 为滚动条整体设置样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

/* 为滚动条的轨道设置样式 */
::-webkit-scrollbar-track {
background: rgba(#101F1C, 0.1);
border-radius: 2em;
}

/* 为滚动条的滑块设置样式 */
::-webkit-scrollbar-thumb {
background-color: rgba(144,147,153,.5);
border-radius: 2em;
transition: background-color .3s;
cursor: pointer;
}

/* 当鼠标悬停在滑块上时改变滑块的颜色 */
::-webkit-scrollbar-thumb:hover {
background-color: rgba(144,147,153,.3);
}
</style>
